<template>
  <div class="content_padding">
    <div class="container" style="position: fixed; top: 0;left: 0;">
      <span class="staffTitle">添加设备</span>
      <div class="btn">
        <el-button type="text" icon="icon iconfont iconfanhui" @click="returnPage">返回</el-button>
        <el-button type="text" icon="el-icon-position" @click="addPointInfo">提交</el-button>
      </div>
    </div>

    <div class="info-wrap">
      <div class="info-modal">
        <span class="text">标段：</span>
        <el-select style="width: 140px;" size="medium" placeholder="请选择" v-model="form.bidSection" clearable >
          <el-option
            v-for="item in biaoduanList"
            :key="item.id"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
      </div>
      <div class="info-modal">
        <span class="text">进场编号：</span>
        <el-input style="width: 160px;" size="medium" placeholder="请输入" v-model.trim="form.mobilizationSerialNumber"></el-input>
      </div>
      <div class="info-modal">
        <span class="text">设备类型：</span>
        <el-select style="width: 140px;" size="medium" placeholder="请选择" v-model="form.deviceType" clearable >
          <el-option
            v-for="item in deviceType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="info-modal">
        <span class="text">设备来源：</span>
        <el-select style="width: 140px;" size="medium" placeholder="请选择" v-model="form.deviceSource" clearable >
          <el-option
            v-for="item in deviceLaiyuan"
            :key="item.value"
            :label="item.label"
            :value="item.label">
          </el-option>
        </el-select>
      </div>

      <el-button type="primary" size="medium" icon="el-icon-search" style="margin-left:40px" @click="queryListData">查询</el-button>
    </div>

    <div class="table-wrap">
      <div class="hint-text">提示：请通过筛选条件查询需要添加的设备！</div>
      <el-table
        :data="pointList"
        :height="tableHeight"
        size="small"
        style="width: 100%;"
        v-loading="loading"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="No" :index="indexMethod"></el-table-column>
        <el-table-column prop="deviceCnName" label="设备名称"></el-table-column>
        <el-table-column prop="mobilizationSerialNumber" label="进场编号"></el-table-column>
        <el-table-column prop="bidSection" label="标段"></el-table-column>
        <el-table-column prop="deviceTypeName" label="设备类型"></el-table-column>
        <el-table-column prop="model" label="规格型号"></el-table-column>
        <el-table-column prop="examinationNumber" label="报审表编号"></el-table-column>
        <el-table-column prop="deviceSource" label="设备来源"></el-table-column>
        <el-table-column label="设备验收">
          <template slot-scope="scope">
            <span>{{ scope.row.entryStatus == 1 ? "已进场" : "已退场" }}</span>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
    </div>
  </div>
</template>

<script>
  import Pagination from "../Pagination";
  import HttpInterface from "../../../util/httpInterface";
  import Constants from "../../../util/constants";
  import { mapState } from "vuex";

  export default {
    components: {Pagination},
    data() {
      return {
        dialogVisible: false,
        loading: false,
        tableHeight: 0,
        pointList: [],
        addPointList: [],
        form: {
          bidSection: "",
          mobilizationSerialNumber: "",
          deviceType: "",
          deviceSource: "",
        },
        deviceType: [
          { value: '1-1', label: '一般设备' },
          { value: '1-2', label: '主要设备' },
          { value: '1-3', label: '特种设备' },
          { value: '1-4', label: '关键设备' },
        ],
        deviceLaiyuan: [
          {value: '1', label: "自有"},
          {value: '2', label: "租凭"},
        ],
        pageData: {
          total: 0,
          pageNum: 1,
          pageSize: 20
        }
      }
    },
    computed: {
      ...mapState(["biaoduanList"])
    },

    created() {
      this.getTableHeight();
    },

    mounted() {
      let _this = this;
      let resizeFlag = null;
      window.onresize = () => {
        if (resizeFlag) {
          clearTimeout(resizeFlag);
        }
        resizeFlag = setTimeout(() => {
          _this.getTableHeight();
          resizeFlag = null;
        }, 120);
      };
    },

    destroyed() {
      window.onresize = null;
    },

    methods: {
      // 返回
      returnPage() {
        this.$parent.$data.showPage = 0;
        this.$parent.refreshListData();
      },

      getTableHeight() {
        let tableH = 250;
        let tableHeightDetil = window.innerHeight - tableH;
        if (tableHeightDetil <= 300) {
          this.tableHeight = 300;
        } else {
          this.tableHeight = window.innerHeight - tableH;
        }
      },

      indexMethod (index) {
        return index + 1;
      },

      pageNumData (page) {
        this.pageData.pageNum = Number(page);
        this.queryListData();
      },

      pageSizeData (page) {
        this.pageData.pageSize = Number(page);
        this.queryListData();
      },

      tableRowClassName({row}) {
        if (row.entryStatus != 1) {
          return 'warning-row';
        }
        return '';
      },

      show() {
        this.form = {
          bidSection: "",
          mobilizationSerialNumber: "",
          deviceType: "",
          deviceSource: "",
        }
        this.queryListData();
      },

      // 条件筛选
      queryListData() {
        this.loading = true;
        let _this = this;
        let searchMap = {
          page: this.pageData.pageNum,
          size: this.pageData.pageSize,
          bidSection: this.form.bidSection,
          deviceSource: this.form.deviceSource,
          deviceType: this.form.deviceType,
          mobilizationSerialNumber: this.form.mobilizationSerialNumber
        };
        HttpInterface.requestPost(this, HttpInterface.URL_DEVICE_FIND_PAGE, searchMap, function (res) {
          let data = res.data;
          if (data.success) {
            _this.loading = false;
            let rows = data.other.rows;
            rows.forEach(item  => {
              item.deviceTypeName = Constants.DEVICE_TYPE_LIST[item.deviceType]
            })
            rows.sort(function (a, b) {
              return b.entryStatus - a.entryStatus;
            })
            _this.pointList = rows;
            _this.pageData.total = data.other.total;
          } else {
            _this.loading = false;
            _this.errorMessage("获取数据失败！");
          }
        }, function (err) {
          _this.loading = false;
          _this.errorMessage("获取数据失败！");
        }, false)
      },

      handleSelectionChange(val) {
        this.addPointList = val;
      },

      // 添加检定信息
      addPointInfo() {
        if (this.addPointList.length == 0) return this.warningMessage('请选择需要添加的设备！');
        let _this = this;
        let params = {
          mechanicalDevices: this.addPointList
        };
        HttpInterface.requestPost(this, HttpInterface.URL_INSERT_FOREACH, params, function (res) {
          let data = res.data;
          if (data.success) {
            _this.successMessage("添加成功！");
            _this.$parent.$data.showPage = 0;
            _this.$parent.refreshListData();
          } else {
            _this.errorMessage(data.message);
          }
        }, null, false)
      }
    }
  }
</script>

<style scoped lang="scss">
  .info-wrap{
    display: flex;
    margin-top: 90px;

    .info-modal{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 30px;

      .text{
        font-size: 14px;
        margin-right: 4px;
        width: 70px;
        display: inline-block;
        text-align: right;
      }
    }
  }

  .table-wrap{
    margin-top: 10px;
    padding: 0 20px;

    .hint-text{
      font-size: 13px;
      color: #f55f5f;
      margin-left: 8px;
      margin-bottom: 20px;
    }
  }

  .el-button--text >>> .iconfanhui{
    margin-right: 4px;
    font-size: 18px;
    vertical-align: -2px;
  }

  .el-table >>> .warning-row {
    background: #fdf5e6;
  }
</style>
